<template>
  <a-card class="icon-card" :loading="loading" :bordered="false">
    <a-card-meta :title="total" :description="title">
      <template #avatar>
        <a-avatar :style="iconStyle">
          <template #icon><component :is="icon" /></template>
        </a-avatar>
      </template>
    </a-card-meta>
  </a-card>
</template>

<script name="IconCard" lang="ts" setup>
defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: () => ""
  },
  icon: {
    type: String,
    default: () => ""
  },
  total: {
    type: Number,
    default: 0
  },
  iconStyle: {
    type: Object,
    default: null
  }
});
</script>

<style lang="less" scoped>
.icon-card {
  :deep(.ant-card-body) {
    padding: 20px;

    .ant-card-meta {
      .ant-card-meta-avatar {
        margin-top: 3px;
        .ant-avatar-icon {
          font-size: 25px;
          width: 40px;
          height: 40px;
          line-height: 40px;
        }
      }

      .ant-card-meta-detail {
        div:not(:last-child) {
          margin: 0;
        }

        .ant-card-meta-title {
          font-size: 18px;
        }
        .ant-card-meta-description {
          font-size: 12px;
        }
      }
    }
  }
}
</style>
